<template>
	<fui-fab bottom="220" distance="80" width="80" :background="background" position="right" :fabs="fabs"
		@click="handleClick">
	</fui-fab>
	<fui-modal :show="show" :descr="descr" maskClosable @click="onClick" @cancel="onCancel"></fui-modal>
	<!-- 评论 -->
	<fui-toast ref="toastRef"></fui-toast>
	<fui-bottom-popup :show="commonShow" @close="closePopup">
		<view class="fui-custom__wrap" v-if="commonShow">
			<view class="fui-title">
				<view class="fui-icon__close" @tap="closePopup">
					<fui-icon name="close" :size="48"></fui-icon>
				</view>
				<div>发布</div>
				<div>
					<fui-text @click="goComment" text="评论" type="primary"></fui-text>
				</div>
			</view>
			<fui-textarea maxlength="100" isCounter minHeight="900rpx" v-model="text" radius="20rpx"
				placeholder="请输入内容"></fui-textarea>
		</view>
	</fui-bottom-popup>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance,
		defineEmits
	} from 'vue'
	import {
		useStore
	} from 'vuex'
	import {
		addCommentByArticleIdApi,
		replyCommentApi,
		resetCommentApi
	} from '../../api/index.js'
	const props = defineProps({
		article: {
			type: Object,
			required: true
		}
	})
	const emit = defineEmits(['resetArticle'])
	const store = useStore()
	const {
		proxy
	} = getCurrentInstance()



	const toastRef = ref(null)
	const fabs = ref([
		// 	{
		// 	name: 'star',
		// 	text: '收藏'
		// },
		{
			name: 'share',
			text: '分享'
		},
		// {
		// 	name: 'fabulous',
		// 	text: '点赞'
		// }, 
		{
			name: 'comment',
			text: '评论'
		}
	], )
	const background = ref('#5268CF')
	const handleClick = (item, i) => {
		if (!store.state.userInfo.wechat_id) {
			return show.value = true
		}
		switch (item.index) {
			// case 0:
			// 	console.log('收藏')
			// 	break;
			case 0:
				console.log('分享')
				break;
				// case 2:
				// 	console.log('点赞')
				// 	break;
			case 1:
				console.log('评论')
				isComment.value = 0
				commonShow.value = true
				break;
		}
	}
	const show = ref(false)
	const descr = ref('您还未登录，请先登录')
	const showModal = () => {
		show.value = true;
	}
	const onClick = (item) => {
		switch (item.index) {
			case 0:
				show.value = false
				break;
			case 1:
				uni.switchTab({
					url: `/pages/my/index`
				});
				break;
		}
	}
	const onCancel = () => {
		show.value = false
	}
	// 评论 || 回复
	//  0 => 评论  1 =>回复
	const isComment = ref(0)
	// 评论
	const commonShow = ref(false)
	// 关闭
	const closePopup = () => {
		text.value = ''
		commonShow.value = false
	}
	// 评论内容
	const text = ref('')
	// 发表评论
	const goComment = async () => {
		console.log(text.value, 'text.value')
		if (!text.value) {
			return toastRef.value.show({
				text: '请输入评论'
			})
		}
		if (isComment.value) {
			// 回复
			const {
				data
			} = await replyCommentApi(proxy, {
				...props.article,
				parentReply: parentReply.value,
				currentReply: currentReply.value,
				commentId: store.state.userInfo.mem_ID,
				commentName: store.state.userInfo.mem_Name,
				commentValue: text.value
			})
			if (data?.code == 200) {
				closePopup()
				emit('resetArticle')
			}
		} else {
			// 评论
			const {
				data
			} = await addCommentByArticleIdApi(proxy, {
				...props.article,
				commentId: store.state.userInfo.mem_ID,
				commentName: store.state.userInfo.mem_Name,
				commentValue: text.value
			})
			if (data?.code == 200) {
				closePopup()
				emit('resetArticle')
			}
		}

		// 更新文章评论数量
		const res = await resetCommentApi(proxy, {
			articleId: props.article.log_ID
		})
		console.log(res)

	}
	// 被回复评论信息
	const parentReply = ref({})
	const currentReply = ref({})
	// 回复打开弹窗
	const replyOpen = (parent, current) => {
		// 上层评论
		parentReply.value = parent
		// 当前
		currentReply.value = current
		console.log(parentReply.value, '上层')
		console.log(currentReply.value, '当前')
		isComment.value = 1
		commonShow.value = true
	}
	defineExpose({
		commonShow,
		isComment,
		replyOpen
	})
</script>

<style scoped lang="scss">
	.fui-custom__wrap {
		width: 100%;
		// height: 1100rpx;

		.fui-title {
			font-size: 30rpx;
			font-weight: bold;
			text-align: center;
			height: 100rpx;
			line-height: 100rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 25rpx;
			box-sizing: border-box;
		}

	}
</style>
